<template>
    <div class="eCBAnalysis1">
        <div class="leftContent" :class="dir == 'left' ? 'leftArrow' : 'rightArrow'">
            <navigation-bar customTitle="建筑列表">
                <div class="searchContent">&nbsp;</div>
            </navigation-bar>
            <el-tree class="elTree" ref="elTree" default-expand-all :data="data" node-key="id" :props="defaultProps"> </el-tree>
        </div>
        <div class="rightContent" :class="dir == 'left' ? 'leftTable' : 'rightTable'">
            <div class="flexDict">
                <div class="flex-right">
                    <div class="flex-right-item">
                        <navigationBar customTitle="建筑统计规则">
                            <div class="searchContent">
                                <custom-button type="add" style="margin-right: 10px" @addClick="addTableClick"></custom-button>
                                <el-button
                                    size="mini"
                                    style="margin-right: 10px; background-color: #fc6a6e; color: #fff; border: none"
                                    @click="deleteTableAll"
                                >
                                    <i class="el-icon-delete"></i> 批量删除
                                </el-button>
                            </div>
                        </navigationBar>
                        <div style="margin-top: 10px" class="firstTableDict">
                            <tableIndex
                                :dataSource="dataSource"
                                :tableColumns="tableColumns"
                                :btnList="btnList"
                                :pageSize="pageSize"
                                :pageCount="pageCount"
                                :pageNo="pageNo"
                                @pageChange="pageChange"
                                @editRow="editTableRow"
                                @viewRow="viewRow"
                                @deleteRow="deleteTableRow"
                                selection
                                :height="400"
                                @handleSelectionChange="handleTableSelectionChange"
                                @handleCurrentChange="handleCurrentChange"
                            ></tableIndex>
                        </div>
                    </div>
                    <div class="flex-right-item" style="margin-top: 20px">
                        <navigationBar customTitle="建筑设备">
                            <div class="searchContent">&nbsp;</div>
                        </navigationBar>
                        <tableHeightIndex
                            :dataSource="dataSourceDown"
                            :tableColumns="tableColumnsDown"
                            :btnList="btnListDown"
                            :pageSize="pageSize"
                            :height="secondTableHeight"
                            selection
                            @handleSelectionChange="handleSelectionChange"
                        ></tableHeightIndex>
                    </div>
                </div>
            </div>
        </div>
        <arrowLeft @arrowChange="arrowChange"></arrowLeft>
        <div v-if="dialogShow">
            <custom-dialog :title="dialogTitle" size="large" @dialogClose="dialogClose">
                <form-index :formConfig="formConfig" @submit="tableSubmit2" :type="type" @formInputChange="formInputChange" ref="form">
                </form-index>
            </custom-dialog>
        </div>

        <!-- 规则标识 -->
        <div v-if="dialogTableShow">
            <custom-dialog :title="dialogTableTitle" size="large" @dialogClose="dialogTableClose">
                <form-index
                    :formConfig="formTableConfig"
                    @submit="tableSubmit"
                    :type="tableType"
                    @formInputChange="formInputChange"
                    ref="form"
                >
                </form-index>
            </custom-dialog>
        </div>
    </div>
</template>

<script>
import arrowLeft from '@/components/customComponents/arrowLeft'
import tableHeightIndex from '@/components/customComponents/customeTable/tableHeightIndex.vue'
import tableIndex from '@/components/customComponents/customeTable/tableIndex'
import navigationBar from '@/components/customComponents/managementCenter/navigationBarCustom'
import customDialog from '@/components/customComponents/customDialog'
import customButton from '@/components/customComponents/customForm/customButton'
import {Utility} from '@/libs/utility'
import {PopupCommon} from '@/libs/popupCommon'
import {SessionCommon} from '@/libs/sessionCommon'
import {ruleList, ruleRoomList} from '@/mockData/systemManage.js'
import {ruleManageForm} from '@/assets/form/managementCenter/systemManage/ruleManage.js'
import {dictValueManageForm} from '@/assets/form/managementCenter/systemManage/dictValueManage.js'
import formIndex from '@/components/customComponents/customForm/formIndex'
export default {
    name: 'eCBAnalysis',
    components: {arrowLeft, navigationBar, customButton, tableHeightIndex, tableIndex, customDialog, formIndex},
    data() {
        return {
            unitName: '',
            dir: 'left',
            tableColumnsDown: [
                {
                    prop: 'name',
                    label: '设备名称'
                },
                {
                    prop: 'address',
                    label: '设备地址'
                },
                {
                    prop: 'sblx',
                    label: '设备类型',
                    dictName: 'elecType'
                },
                {
                    prop: 'sbxh',
                    label: '设备型号'
                },
                {
                    prop: 'azdz',
                    label: '安装地址'
                }
            ],
            dataSourceDown: [],
            dialogTableShow: false,
            dialogTableTitle: '新增规则',
            curHeight: 100,
            data: [],
            yzId: '',
            secondTableHeight: document.body.clientHeight - 570,
            selectTableItem: [],
            tableItem: {},
            selectItem: [],
            username: '',
            // table 相关参数  begin
            dataSource: ruleList,
            tableColumns: [
                {
                    prop: 'name',
                    label: '建筑名称'
                },
                {
                    prop: 'type',
                    label: '统计类型',
                    dictName: 'elecType'
                },
                {
                    prop: 'fxnh',
                    label: '分项能耗代码'
                },
                {
                    prop: 'yjzx',
                    label: '一级子项'
                },
                {
                    prop: 'ejzx',
                    label: '二级子项'
                },
                {
                    prop: 'zdyfx',
                    label: '自定义分项'
                },
                {
                    prop: 'jsfs',
                    label: '计算方式',
                    dictName: 'calcType'
                },
                {
                    prop: 'zhczr',
                    label: '最后操作人'
                },
                {
                    prop: 'czsj',
                    label: '操作时间'
                }
            ],
            btnList: ['edit', 'delete'],
            btnListDown: [],
            pageSize: 20,
            pageCount: 2,
            pageNo: 1,
            // table 相关参数  end

            // 弹窗是否显示
            dialogShow: false,
            // 弹窗标题 (新增修改不同)
            dialogTitle: '',

            // form的配置信息
            formConfig: dictValueManageForm,
            type: 'add',

            formTableConfig: ruleManageForm,
            tableType: 'add',
            defaultProps: {
                children: 'children',
                label: 'title'
            }
        }
    },
    computed: {},
    created() {
        this.getAllMenu()
    },
    mounted() {
        this.$nextTick(() => {
            this.$refs.elTree.setCurrentKey(this.data[0].id) // 默认选中节点第一个
        })
        //初始时设置即可
    },
    methods: {
        getAllMenu() {
            const tempTreeData = [
                {
                    id: 1,
                    title: '建筑1'
                },
                {
                    id: 2,
                    title: '建筑2',
                    children: [
                        {
                            id: 5,
                            title: '建筑2.1',
                            children: [
                                {
                                    id: 6,
                                    title: '建筑2.1.1'
                                }
                            ]
                        },
                        {
                            id: 7,
                            title: '建筑2.2'
                        }
                    ]
                },
                {
                    id: 3,
                    title: '建筑3',
                    children: [
                        {
                            id: 4,
                            title: '建筑3.1'
                        }
                    ]
                }
            ]
            this.data = tempTreeData
        },
        customClick(type) {
            //
            if (type == '1') {
                // 全选
                var _newData = JSON.parse(JSON.stringify(this.data))
                // 拉平
                var listData = Utility.arrayFlat(_newData, (t) => t.children)
                var ids = []
                listData.forEach((t) => {
                    if (typeof t.children == 'undefined' || t.children.length == 0) ids.push(t.id)
                })
                this.checkedKey = ids
                this.$refs.elTree.setCheckedKeys(ids)
            }
            if (type == '0') {
                this.checkedKey = []
                this.$refs.elTree.setCheckedKeys([], false)
            }
            if (type == '2') {
                if (this.checkedKey.length < 1) {
                    PopupCommon.notify('info', '请选择至少一个菜单')
                    return
                }
            }
        },

        // 分页点击事件
        pageChange(p) {
            this.pageNo = p
            // this.initPage()
        },
        arrowChange(e) {
            this.dir = e
        },
        dialogTableClose() {
            this.dialogTableShow = false
        },
        getHeight() {
            this.curHeight = window.innerHeight - 146
        },
        addTableClick() {
            this.tableItem = {}

            let formConfigItem = this.formTableConfig
            formConfigItem.map((t) => {
                Object.keys(t).map((res) => {
                    if (res == 'fieldName') {
                        t.filedValue = ''
                    }
                })
            })
            this.formTableConfig = formConfigItem
            this.tableType = 'add'
            this.dialogTableShow = true
            this.dialogTableTitle = '新增规则'
        },
        addClick() {
            if (typeof this.tableItem.id == 'undefined') {
                PopupCommon.notify('info', '请点击规则列表的一行进行选择')
                return
            }
            this.type = 'add'
            this.dialogShow = true
            this.dialogTitle = '（ 规则：【' + this.tableItem.flmc + '】）'
        },
        tableClick(item) {
            this.tableIndex = item.Id
            this.tableItem = {}
            this.dataSourceDown = []
            this.initPage()
        },
        deleteAll() {
            if (this.selectItem.length == 0) {
                PopupCommon.notify('info', '请先勾选数据')
                return
            }
            PopupCommon.notify('success', '删除成功')
            // let self = this
            // PopupCommon.confirm("此操作将删除选择的数据, 是否继续?")
            //     .then(() => {
            //         self.selectItem.forEach((d) => {
            //             const id = d.RelationId
            //             AjaxCommon("/api/TableFieldRelation/Delete?id=" + id, "delete", {
            //                 optReason: ""
            //             }).then((res) => {
            //                 console.log(res)
            //             })
            //         })

            //         setTimeout(() => {
            //             PopupCommon.notify("success", "删除成功")
            //             self.initDownYzzd()
            //         }, 500)
            //     })
            //     .catch(() => {
            //         // 这里尽量写下，否则会报警告异常。
            //         console.log("已取消删除")
            //     })
        },
        deleteTableAll() {
            this.tableItem = {}
            if (this.selectTableItem.length == 0) {
                PopupCommon.notify('info', '请先勾选数据')
                return
            }
            // let self = this
            PopupCommon.notify('success', '删除成功')
            // PopupCommon.confirm("此操作将删除选择的数据, 是否继续?")
            //     .then(() => {
            //         self.selectTableItem.forEach((d) => {
            //             const id = d.Id
            //             AjaxCommon("/api/table/Delete?id=" + id, "delete", {
            //                 optReason: ""
            //             }).then((res) => {
            //                 console.log(res, "res................................")
            //             })
            //         })
            //         setTimeout(() => {
            //             PopupCommon.notify("success", "删除成功")
            //             self.initPage()
            //         }, 500)
            //     })
            //     .catch(() => {
            //         // 这里尽量写下，否则会报警告异常。
            //         console.log("已取消删除")
            //     })
        },

        handleSelectionChange(d) {
            this.selectItem = d
            console.log(d)
        },
        handleTableSelectionChange(d) {
            this.selectTableItem = d
        },
        // 单击行
        handleCurrentChange(d) {
            this.tableItem = d
            const childData = ruleRoomList.filter((t) => t.parentId == d.id)
            this.dataSourceDown = childData
        },
        formInputChange(e) {
            // if (e.filedName == "idCard") {
            // 	const data = CardId.getInfoByCardId(e.value)
            // 	if (data) {
            // 		let newData = e.allData
            // 		newData["birthday"] = data.birthday
            // 		newData["sex"] = data.sex
            // 		this.$refs.form.changeFormValue(newData)
            // 	}
            // }
            console.log(e)
        },
        tableSubmit(d) {
            console.log(d)
            PopupCommon.notify('success', '操作成功')
            this.dialogTableClose()

            // let self = this
            // var params = `?FolderId=${this.tableIndex}&TableName=${d.FolderName}&TableType=1&description=${d.description}`
            // if (d.Id) {
            //     params += `&Id=${d.Id}`
            // }
            // console.log(d, params, self)
            // if (d.Id) {
            //     AjaxCommon("/api/table" + params, "post", {})
            //         .then((res) => {
            //             if (res.data.status == 200) {
            //                 PopupCommon.notify("success", "编辑成功")
            //                 self.initPage()
            //                 self.dialogTableClose()
            //             } else {
            //                 PopupCommon.notify("error", res.data.msg)
            //             }
            //         })
            //         .catch((err) => {
            //             PopupCommon.notify("error", err.message)
            //         })
            // } else {
            //     AjaxCommon("/api/table" + params, "post", {})
            //         .then((res) => {
            //             if (res.data.status == 200) {
            //                 PopupCommon.notify("success", "新增成功")
            //                 self.initPage()
            //                 self.dialogTableClose()
            //             } else {
            //                 PopupCommon.notify("error", res.data.msg)
            //             }
            //         })
            //         .catch((err) => {
            //             PopupCommon.notify("error", err.message)
            //         })
            // }
        },
        tableSubmit2(d) {
            console.log(d)
            PopupCommon.notify('success', '操作成功')
            this.dialogShow = false
            // let self = this
            // var params = `?FolderId=${this.tableIndex}&TableName=${d.FolderName}&TableType=1&description=${d.description}`
            // if (d.Id) {
            //     params += `&Id=${d.Id}`
            // }
            // console.log(d, params, self)
            // if (d.Id) {
            //     AjaxCommon("/api/table" + params, "post", {})
            //         .then((res) => {
            //             if (res.data.status == 200) {
            //                 PopupCommon.notify("success", "编辑成功")
            //                 self.initPage()
            //                 self.dialogTableClose()
            //             } else {
            //                 PopupCommon.notify("error", res.data.msg)
            //             }
            //         })
            //         .catch((err) => {
            //             PopupCommon.notify("error", err.message)
            //         })
            // } else {
            //     AjaxCommon("/api/table" + params, "post", {})
            //         .then((res) => {
            //             if (res.data.status == 200) {
            //                 PopupCommon.notify("success", "新增成功")
            //                 self.initPage()
            //                 self.dialogTableClose()
            //             } else {
            //                 PopupCommon.notify("error", res.data.msg)
            //             }
            //         })
            //         .catch((err) => {
            //             PopupCommon.notify("error", err.message)
            //         })
            // }
        },
        dialogClose() {
            this.yzzdSelect = this.yzzdFixedSelect
            this.dialogShow = false
        },
        searchClick() {
            this.pageNo = 1
            this.initPage()
        },
        searchTableClick() {
            this.tableItem = {}
            this.pageNo = 1
            this.initPage()
        },

        resetClick() {
            this.username = ''
        },
        editRow(d) {
            this.type = 'edit'
            let formConfigItem = this.formConfig
            formConfigItem.map((t) => {
                Object.keys(t).map((res) => {
                    if (res == 'fieldName') {
                        t.filedValue = d.data[t[res]]
                    }
                })
            })
            this.formConfig = formConfigItem
            this.dialogShow = true
            this.dialogTitle = '编辑岗位'
        },

        editTableRow(d) {
            let formConfigItem = this.formTableConfig
            formConfigItem.map((t) => {
                Object.keys(t).map((res) => {
                    if (res == 'fieldName') {
                        t.filedValue = d.data[t[res]]
                    }
                })
            })
            this.formTableConfig = formConfigItem
            this.tableType = 'edit'
            this.dialogTableShow = true
            this.dialogTableTitle = '编辑规则'
        },
        viewRow(d) {
            this.type = 'look'
            let formConfigItem = this.formConfig
            formConfigItem.map((t) => {
                Object.keys(t).map((res) => {
                    if (res == 'fieldName') {
                        t.filedValue = d.data[t[res]]
                    }
                })
            })
            this.formConfig = formConfigItem
            this.dialogShow = true
            this.dialogTitle = '查看' + JSON.parse(SessionCommon.getCurrentMenuInfo()).title
        },
        deleteRow(d) {
            console.log(d)
            PopupCommon.notify('success', '删除成功')
            // const id = d.data.RelationId
            // let self = this
            // AjaxCommon("/api/TableFieldRelation/Delete?id=" + id, "delete", {
            //     optReason: ""
            // }).then((res) => {
            //     console.log(res, "res...............")
            //     if (res.data.status == 200) {
            //         PopupCommon.notify("success", "删除成功")
            //         self.initDownYzzd()
            //     } else {
            //         PopupCommon.notify("error", res.data.msg)
            //     }
            // })
        },
        deleteTableRow(d) {
            console.log(d)
            // this.tableItem = {}
            // const id = d.data.Id
            // let self = this
            // AjaxCommon("/api/table/Delete?id=" + id, "delete", {
            //     optReason: d.optReason
            // }).then((res) => {
            //     console.log(res, "res...............")
            //     if (res.data.status == 200) {
            //         PopupCommon.notify("success", "删除成功")
            //         self.initPage()
            //     } else {
            //         PopupCommon.notify("error", res.data.msg)
            //     }
            // })
        },
        // 初始化事件
        initPage() {
            // // 差个搜索功能
            // let self = this
            // AjaxCommon(`/api/table?tableType=1&key=${this.tableIndex}`, "get", null).then((res) => {
            //     if (res.data.status == 200) {
            //         self.dataSource = res.data.response
            //     } else {
            //         PopupCommon.notify("error", res.data.msg)
            //     }
            // })
        },
        initDownYzzd() {
            console.log(this.tableItem, 'this.tableItem.......')
            // // 差个搜索功能
            // let self = this
            // var params = `TableID=` + this.tableItem.Id
            // AjaxCommon(`/api/TableFieldRelation?${params}`, "get", null).then((res) => {
            //     console.log(res, "res....")
            //     if (res.data.status == 200) {
            //         self.dataSourceDown = res.data.response
            //         // 初始化赋值
            //         self.yzzdFixedSelect = res.data.response
            //         self.yzzdSelect = res.data.response
            //     } else {
            //         PopupCommon.notify("error", res.data.msg)
            //     }
            // })
        }
    }
}
</script>

<style lang="scss" scoped>
.eCBAnalysis1 {
    background-color: #fff;
    height: calc(100vh - 100px);
    /* margin: 10px 0; */
    width: 100%;
    /* padding: 10px; */
    text-align: left;
    display: flex;
    position: relative;
    .elTree {
        height: calc(100vh - 160px);
        overflow-y: auto;
    }
    .leftArrow {
        width: 340px !important;
    }
    .rightArrow {
        width: 0 !important;
        overflow: hidden;
        padding: 0 !important;
        margin: 0 !important;
    }
    .leftContent {
        transition: transform 0.3s;
        width: 340px;
        text-align: left;
        height: 100%;
        text-align: center;
        border-right: 1px solid #eee;
        padding-right: 10px;
        overflow: hidden;
        .mcCommonPager {
            margin-top: 5px !important;
        }
    }
    .leftTable {
        max-width: calc(100% - 340px);
    }
    .rightTable {
        max-width: calc(100% - 0px);
    }
    .rightContent {
        flex: 1;
        text-align: left;
        height: 100%;
        padding: 10px;
        overflow: hidden;

        .btn {
            margin: 15px 0 10px 10px;
        }
    }
}

.flexDict {
    .firstTableDict {
        .mcTableIndex {
            height: 350px;
            .mcTableList {
                height: 350px;
                .el-table {
                    height: 315px !important;
                }
            }
        }
    }
}

.flexDict .flex-left {
    width: 350px;
    margin-right: 10px;
}

.flexDict .flex-right {
    flex: 1;
}

.flexDict .flex-left .navigationBar {
    height: 36px;
    line-height: 36px;
    background-color: #fff;
    margin-top: 10px;
}

.flexDict .flex-left .flex-tree {
    background-color: #fff;
    margin-top: 10px;
    height: calc(100vh - 148px);
    overflow-y: auto;
}

.flexDict .flex-left .flex-tree .delete {
    color: red;
    float: right;
    margin-top: 9px;
    cursor: pointer;
}
.flexDict .flex-left .flex-tree .edit {
    color: blue;
    float: right;
    margin-top: 9px;
    cursor: pointer;
    margin-right: 10px;
}
.flexDict .flex-left .flex-tree .tree-item {
    height: 32px;
    line-height: 32px;
    margin: 5px 10px;
    padding: 0 10px;
    font-size: 14px;
    cursor: pointer;
}
.flexDict .flex-left .flex-tree .tree-item:hover {
    background-color: #e4f1fe;
}
.flexDict .flex-left .flex-tree .hover {
    background-color: #e4f1fe;
}

.flexDict .flex-left .navigationBar label {
    text-align: left;
    font-size: 16px;
    color: #333;
    margin-left: 10px;
}

.flexDict .flex-left .navigationBar span {
    float: right;
    margin-right: 10px;
    color: #333;
    cursor: pointer;
}
</style>
